<template>
	<transition name="fade">
		<view class="mask" v-show="isActive" :class="{ 'full-screen': isFullScreen }" :style="{ backgroundColor }">
			<view class="spinner" :style="{ transform:`translate(-50%, -${translateY}%)`}">
				<slot>
					<view :style="{
					  backgroundColor: color,
					  width: size+20+'px',
					  height: size+20+'px' }" class="spinner-inside"></view>
				</slot>
				<view v-if="text.length" :style="{ color:textColor }">
					{{ text }}
				</view>
			</view>
		</view>
	</transition>
</template>

<script>
	export default {
		name: 'npLoading',
		props: {
			active: Boolean,
			translateY: {
				type: Number,
				default: 150
			},
			text: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#333'
			},
			textColor: {
				type: String,
				default: '#333'
			},
			isFullScreen: {
				type: Boolean,
				default: false
			},
			backgroundColor: {
				type: String,
				default: 'rgba(255, 255, 255, .9)'
			},
			size: {
				type: Number,
				default: 40
			}
		},
		data() {
			return {
				isActive: this.active || false
			}
		},
		watch: {
			active(value) {
				this.isActive = value
			}
		}
	}
</script>

<style scoped>
	.mask {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 3000;
		transition: opacity .3s linear;
	}

	.full-screen {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.spinner {
		position: absolute;
		top: 50%;
		left: 50%;
		text-align: center;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .3s;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}
	
	.spinner-inside {
	  margin: 25px auto;
	 
	  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
	  animation: rotateplane 1.2s infinite ease-in-out;
	}
	 
	@-webkit-keyframes rotateplane {
	  0% { -webkit-transform: perspective(120px) }
	  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
	  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
	}
	 
	@keyframes rotateplane {
	  0% {
	    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
	    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
	  } 50% {
	    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
	    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
	  } 100% {
	    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	  }
	}
</style>
